<template>
    <div class="app-container">

        <!-- 查询条件 -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px"
            style="margin-bottom: 10px;">
            <el-form-item label="平台商品编码" prop="platformProductCode">
                <el-input v-model="queryParams.platformProductCode" placeholder="请输入平台商品编码" clearable
                    style="width: 180px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="平台商品名称" prop="platformProductName">
                <el-input v-model="queryParams.platformProductName" placeholder="请输入平台商品名称" clearable
                    style="width: 180px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="平台规格信息" prop="platformProductInfo">
                <el-input v-model="queryParams.platformProductInfo" placeholder="请输入平台规格名称" clearable
                    style="width: 180px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格数据展示 -->
        <vxe-table border stripe ref="tableRef" size="small" header-align="center" :row-config="rowConfig"
            :column-config="columnConfig" :data="itemList" @radio-change="radioChangeEvent"
            @cell-click="cellClickEvent">
            <vxe-column type="radio" width="40" fixed="center"></vxe-column>
            <vxe-column field="platformProductCode" show-overflow="title" align="center" title="平台商品编码" />
            <vxe-column field="platformProductName" show-overflow="title" align="center" title="平台商品名称" />
            <vxe-column field="platformProductInfo" show-overflow="title" align="center" title="平台规格名称" />
        </vxe-table>

        <!-- 分页信息 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />


        <div style="margin-top: 16px; text-align: right;">
            <el-button type="primary" size="small" @click="handleConfirm">确定</el-button>
        </div>
    </div>
</template>

<script>
import { listplatformProducts } from "@/api/mes/sales/platformProduct";

export default {
    name: "SelectGoods",
    data() {
        return {
            loading: true,
            total: 0,
            itemList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            columnConfig: {
                resizable: true,
                align: 'center',
                headerAlign: 'center',
            },
            rowConfig: {
                keyField: 'id',
                isHover: true,
                isCurrent: true,
            },
            selectedRow: null,
        };
    },
    methods: {
        handleConfirm() {
            if (!this.selectedRow) {
                this.$message.warning('请选择一条平台商品');
                return;
            }
            const item = this.selectedRow;
            const goods = [{
                platformProductCode: item.platformProductCode,
                platformProductName: item.platformProductName,
                platformProductInfo: item.platformProductInfo,
            }];
            this.$emit('selected', goods);
        },
        radioChangeEvent({ row }) {
            this.selectedRow = row;
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.queryParams.platformProductCode = undefined;
            this.queryParams.platformProductName = undefined;
            this.queryParams.platformProductInfo = undefined;
            this.handleQuery();
        },
        getList() {
            this.loading = true;
            listplatformProducts(this.queryParams).then(response => {
                this.itemList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        checkboxChangeEvent() { },
        checkboxAll() { },
        cellClickEvent() { },
    },
    created() {
        this.getList();
    },
};
</script>

<style scoped>
::v-deep .el-scrollbar__wrap {
    overflow: scroll;
    overflow-x: hidden;
    height: 100%;
}
</style>